<template>
    <a-form-item :label="label" :name="formkey" :label-col="labelCol">
        <div class="FormView">
            <a-input-number style="width:100%" :name="formkey" v-model:value="NumberValue" spellcheck="false"
                :disabled="disabled" v-if="Value != 'auto'">
                <template #addonAfter>
                    <a-popover>
                        <template #content>
                            <div class="UnitItem" :class="{ active: item == Unit }" @click="Unit = item"
                                v-for="item in UnitList" :key="item">
                                {{ item }}
                            </div>
                        </template>
                        <span>{{ Unit }}</span>
                    </a-popover>
                </template>
            </a-input-number>

            <a-input style="width:100%" :disabled="true" v-model:value="Value" :name="formkey" spellcheck="false"
                v-if="Value == 'auto'">
                <template #addonAfter>
                    <a-popover>
                        <template #content>
                            <div class="UnitItem" :class="{ active: item == Unit }" @click="Unit = item"
                                v-for="item in UnitList" :key="item">
                                {{ item }}
                            </div>
                        </template>
                        <span>{{ Unit }}</span>
                    </a-popover>
                </template>
            </a-input>

            <a-button :type="Code ? 'primary' : 'default'" class="button" v-if="codeStatus">
                <template #icon>
                    <span class="C-Icon">&#xe6d5;</span>
                </template>
            </a-button>
        </div>
    </a-form-item>
</template>
<script setup>
import { computed, nextTick, ref, watch } from 'vue';
const props = defineProps(['label', 'code', 'disabled', 'codeStatus', 'labelWidth', 'formkey']);
const Value = defineModel('value');

const Unit = ref('px');
const UnitList = ['rem', 'em', 'px', '%', 'vw', 'vh', 'auto'];

const NumberValue = ref();


let ValueFelg = false;

watch(Value, (val) => {
    var value = parseFloat(val);
    ValueFelg = true;
    Unit.value = (val + '').replace((value + ''), '');
    NumberValue.value = value;
    nextTick(() => {
        ValueFelg = false;
    })
}, { immediate: true });


watch([Unit, NumberValue], (val) => {
    if (Unit.value == 'auto') {
        Value.value = 'auto';
    } else {
        if (isNaN(NumberValue.value)) {
            switch (Unit.value) {
                case 'px':
                    NumberValue.value = 14;
                    break;
                case 'rem':
                    NumberValue.value = 1;
                    break;
                case 'em':
                    NumberValue.value = 1;
                    break;
                case '%':
                    NumberValue.value = 10;
                    break;
                case 'vw':
                    NumberValue.value = 10;
                    break;
                case 'vh':
                    NumberValue.value = 10;
                    break;
                default:
                    NumberValue.value = 14;
                    break;
            }
        }
        if (!ValueFelg) {
            Value.value = NumberValue.value + Unit.value;
        }
    }
})

const labelCol = computed(() => {
    if (props.labelWidth) {
        return { style: { width: props.labelWidth } }
    } else {
        return null
    }
});
</script>
<style scoped lang="less">
.UnitItem {
    padding: 0 11px;
    cursor: pointer;
    text-align: center;
    border-radius: 3px;

    &:hover {
        background-color: #f0f0f0;
    }

    &.active {
        background-color: #1677ff;
        color: #fff;
    }


}
</style>